{% extends 'base.html' %}
{% load extra_filters %}
{% block body_context %}
    <link href="../static/img/tg_index.css" rel="stylesheet" type="text/css"/>
    <div id="flashBg">
        <div id="flashLine">
            <div id="flash">
                {% for img in flash_images %}
                    <a href="/" target="_blank" id="flash{{ img|indexof:flash_images}}" style="display: block" name="#000000"><img
                            src="../static/resource/{{ img.image }}" width="980" height="393"/></a>
                {% endfor %}
                <div class="flash_bar">
                    {% for img in flash_images %}
                        {% if img|indexof:flash_images == 0 %}
                            <div class="dq" id="f{{ img|indexof:flash_images }}" onClick="changeflash({{ img|indexof:flash_images }})"></div>
                        {% else %}
                            <div class="no" id="f{{ img|indexof:flash_images }}" onClick="changeflash({{ img|indexof:flash_images }})"></div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <!--flash end-->
    <div class="hotnews">
        <style>
            #google1 {
                height: 33px;
                line-height: 33px;
                overflow: hidden;
            }
        </style>
        <div id="google1">
            <ul id="dhooo1">
                {% for news in hot_news %}
                    <li><a href="/" target="_blank"><h4 style="color:red;">{{ news.title }}</h4></a></li>
                {% endfor %}
            </ul>
        </div>
        <script type="text/javascript">
            <!--
            var Marquee = function (A, B, C, D, E, F) {
                var $ = function (id) {
                    return document.getElementById(id)
                }, Y = +!!F;
                (A = $(A)).appendChild((B = $(B)).cloneNode(true));
                (function () {
                    var m = A.scrollTop % C ? (E || 0) : D;
                    A.scrollTop = [0, B.offsetHeight][Y] == A.scrollTop ? [B.offsetHeight - 1, 1][Y] : (A.scrollTop + [-1, 1][Y]);
                    setTimeout(arguments.callee, m);
                })()
                return arguments.callee;
            }
            Marquee('google1', 'dhooo1', 33, 8000, 30, 1);
            -->
        </script>
    </div>
    <!--About begin-->
    <div class="index_about">
    <p>{{ corp_info.profile|safe }}</p>
    </div>
    <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function () {
{#            $(".item1").hover(function () {#}
{#                $("#tit_fc1").stop(false, true).slideDown("normal");#}
{#            }, function () {#}
{#                $("#tit_fc1").stop(false, true).slideUp("fast");#}
{#            });#}
{#            $(".item2").hover(function () {#}
{#                $("#tit_fc2").stop(false, true).slideDown("normal");#}
{#            }, function () {#}
{#                $("#tit_fc2").stop(false, true).slideUp("fast");#}
{#            });#}
{#            $(".item3").hover(function () {#}
{#                $("#tit_fc3").stop(false, true).slideDown("normal");#}
{#            }, function () {#}
{#                $("#tit_fc3").stop(false, true).slideUp("fast");#}
{#            });#}
{#            $(".item4").hover(function () {#}
{#                $("#tit_fc4").stop(false, true).slideDown("normal");#}
{#            }, function () {#}
{#                $("#tit_fc4").stop(false, true).slideUp("fast");#}
{#            });#}
        });

        var currentindex = 0;
        var num_images = {{ flash_images|length }}
        $("#flashBg").css("background-color", $("#flash1").attr("name"));
        function changeflash(i) {
            currentindex = i;
            for (j = 0; j<num_images; j++) {
                if (j == i) {
                    $("#flash" + j).fadeIn("normal");
                    $("#flash" + j).css("display", "block");
                    $("#f" + j).removeClass();
                    $("#f" + j).addClass("dq");
                    $("#flashBg").css("background-color", $("#flash" + j).attr("name"));
                }
                else {
                    $("#flash" + j).css("display", "none");
                    $("#f" + j).removeClass();
                    $("#f" + j).addClass("no");
                }
            }
        }
        function startAm() {
            timerID = setInterval("timer_tick()", 5000);
        }
        function stopAm() {
            clearInterval(timerID);
        }
        function timer_tick() {
            currentindex += 1;
{#            currentindex = currentindex >= num_images ? 0 : currentindex + 1;#}
            currentindex = currentindex % num_images;
            changeflash(currentindex);
        }
        $(document).ready(function () {
            $(".flash_bar div").mouseover(function () {
                stopAm();
            }).mouseout(function () {
                startAm();
            });
            startAm();
        });

        function ChangeImg(i) {
            $("#img" + i).removeAttr("src");
            $("#img" + i).attr("src", "img/clients_" + i + "a.gif");
        }
        function ResetImg(i) {
            $("#img" + i).removeAttr("src");
            $("#img" + i).attr("src", "img/clients_" + i + ".gif");
        }
        //----Popfc

        function ClosePop(i) {
            $("#Pop" + i).fadeOut("normal")
        }

        $(function () {
            $("div[name='divClick']").click(function () {
                if ($(this).attr('class') == 'item1') {
                    var showDiv = $("#Pop1");   //得到层对象
                }
                if ($(this).attr('class') == 'item2') {
                    var showDiv = $("#Pop2");   //得到层对象
                }
                if ($(this).attr('class') == 'item3') {
                    var showDiv = $("#Pop3");   //得到层对象
                }
                if ($(this).attr('class') == 'item4') {
                    var showDiv = $("#Pop4");   //得到层对象
                }
                var divName = showDiv.attr('name');   //得到这个层的name
                if (showDiv.is(":hidden")) {     //判断层是否隐藏
                    $("div[name='" + divName + "']").hide("normal");
                    showDiv.fadeIn("normal");              //true：显示
                    $('body').one('click', function () {    //给BODY绑定一次性点击事件
                        showDiv.fadeOut("normal");                    //点击BODY显示层
                    });
                    return false;                           //返回
                }
                else {
                    showDiv.hide();                   //false:显示层
                    $('body').one('click', function () {    //给BODY绑定一次性点击事件
                        showDiv.fadeOut("normal");                    //点击BODY显示层
                    });
                    return false;                           //返回
                }
            });

            $("div[name='PopBox']").click(function () {     //点击显示部分不隐藏
                return false;
            });
        });
{##}
{#        $("#logo").hover(#}
{#                function () {#}
{#                    $(".LogoGaoguang").fadeIn("slow");#}
{#                },#}
{#                function () {#}
{#                    $(".LogoGaoguang").fadeOut("slow");#}
{#                }#}
{#        );#}
    </script>
{% endblock %}